<template>
	<view class="wrap">
		<view class="bbsItem hasFlex">
			<view class="userHead">
				<image class="samePar" :src="getUrl(bbsDet.portrait)"></image>
			</view>
			<view class="bbsCon">
				<view class="userName spaceBet">
					<view class="name">{{bbsDet.realName}}</view>
					<view class="jhTag" v-if="bbsDet.bestMofitfflag == 1 || bbsDet.topFlag == 1">
						<text v-if="bbsDet.bestMofitfflag == 1">精华</text>
						<template v-if="bbsDet.topFlag == 1">
							<text class="lineView"></text>
							<text>置顶</text>
						</template>
					</view>
				</view>
				<view class="bbsTopic">{{bbsDet.motifName}}</view>
				<view class="bbsTime">{{bbsDet.sendTime}}</view>
			</view>
		</view>
		<view class="conWrap">
			<jyf-parser :html="formatImgRichText(formatImgServe(bbsDet.content))" :tag-style="tagStyle"  :selectable="true"></jyf-parser>
		</view>
		<view class="botFix hasBg padd hasFlex">
			<view class="fixItem active">
				<text class="iconfont icon-zan"></text>
				<text>{{bbsDet.support}}</text>
			</view>
			<view class="fixItem active">
				<text class="iconfont icon-shoucangon"></text>
				<text>{{bbsDet.concern}}</text>
			</view>
			<view class="fixItem active">
				<text class="iconfont icon--pinglun"></text>
				<text>{{bbsDet.replyCount}}</text>
			</view>
		</view>
		<block v-if="isHasDataFlag">
			<view class="commentList padd">
				<view class="listItem spec"
					v-for="(item,index) in reList"
					:key="index" 
				>
					<view class="quesWrap">
						<view class="listItemTop hasFlex">
							<view class="itemImg hasFlex">
								<view class="headImg">
									<image class="samePar" :src="getUrl(item.portrait)"></image>
								</view>
								<view class="usename">{{item.realName}}</view>
							</view>
							<view class="topRight time">{{item.replyTime}}</view>
						</view>
						<view class="itemCon">
							<jyf-parser :html="formatImgRichText(formatImgServe(item.replyContent))" :tag-style="tagStyle" :selectable="true"></jyf-parser>
						</view>
					</view> 
				</view>
			</view>
			<loading-view :loading="loading"></loading-view>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</block>
		<view class="btnGroupBot">
			<button class="comBtn" @tap="addComment">我来说几句</button>
		</view>
	</view>
</template>

<script>
	import { getBbsDet } from '@/api/zhuxue'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		data(){
			return{
				detId:'',
				nowPage:1,
				loading:false,
				isHasDataFlag:null,
				isRefreshFlag:false,
				bbsDet:[],
				reList:[],
				tagStyle: {
					p: 'font-size:18px'+
						'px;font-weight:400;margin-bottom:25px;text-align:justify;word-break:normal;word-wrap:break-word;/* background-color:transparent!important; */color:#333333',
					section: 'font-size:18px'+
						'px;font-weight:400;',
					img: 'max-width:100%!important;height:auto!important;margin:8px auto!important;display:block!important'
				}
			}
		},
		computed:{
			getUrl(url){
				return function(url){
					if(url != undefined){
						if(url.startsWith( 'Module' )){
							return this.zhuXueServer + '/' + url
						}else{
							return url;
						}
					}
				}
			},
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g");
						if(content.indexOf('<img') != -1){
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			},
			formatImgServe(){
				return function(content){
					var reg = new RegExp("Module/", "g");
					if(content != undefined ){
						if(content.indexOf('Module/') != -1){
							return content = content.replace(reg, this.zhuXueServer + '/Module/');
						}else{
							return content
						}
					}
				}
			}
		},
		onLoad(options){
			this.detId = options.detId;
			this.loadBbsDet();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.initParams();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading ){
				this.loadBbsDet();
			}
		},
		methods:{
			loadBbsDet(){
				let { nowPage,reList } = this;
				this.loading = true;
				var field = { id:this.detId,pageNo:this.nowPage,pageSize:30 };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getBbsDet({content:contentStr}).then(res=>{
					if(this.nowPage == 1){
						this.bbsDet = res.data.datas.mInfo[0];
						if(res.data.datas.reList.length == 0){
							this.loading = false;
							this.isHasDataFlag=false;
						}
					}
					if(res.data.datas.reList.length > 0){
						nowPage += 1;
						reList.push( ...res.data.datas.reList );
						this.reList = reList;
						this.nowPage = nowPage;
						this.loading = false;
						this.isHasDataFlag=true;
					}else{
						if(this.nowPage > 1){
							this.loading = false;
						}
					}
				}).catch(err=>{
					console.log(err)
				});
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.reList = [];
				this.loadBbsDet();
			},
			addComment(){
				uni.navigateTo({
					url:'/pages/subIndex/addComment/addComment?resId=' + this.detId + '&fromPage=zxBbsPage'
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	@import '@/static/scss/bbsList.scss';
	@import '@/static/scss/zxsPj.scss';
	.wrap{
		@include respTo(phone){
			padding-bottom: 120rpx;
		}
		@include respTo(pad){
			padding-bottom: 90rpx;
		}
	}
	.comBtn{
		background: $pss-color-blue;
	}
	.commentList{
		margin-top: 20rpx;
		background: #fff;
	}
	.conWrap{
		background: #fff;
		margin-top: -20rpx;
		@include respTo(phone){
			padding:0 30rpx 20rpx;
			font-size: $font-size30;
		}
		@include respTo(pad){
			padding:0 20rpx 20rpx;
			font-size: $padSize16;
		}
	}
	.bbsTime{
		color: $pss-text-colora;
		margin-top: 10rpx;
		@include respTo(phone){
			font-size: $font-size28;
		}
		@include respTo(pad){
			font-size: $padSize14;
		}
	}
</style>